<!DOCTYPE html>

<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="HashMap.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="gmap3.js"></script>
    <script type="text/javascript" src="map.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="InfoMarker.js"></script>

    <title>Coffee Break</title>

    <!-- Le styles -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }

        .sidebar-nav {
            padding: 9px 0;
        }

        #example {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        #example img {
            max-width: none;
        }

        #example label {
            width: auto;
            display: inline;
        }

        #mainHero {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.95;
            width: 10%;
            bottom: 0;
            margin-top: 0;
            margin-bottom: 0;
        }

        #error {
            position: fixed;
            top: -3px;
            z-index: 10000;
            width: 200px;
            left: 50%;
            margin-left: -100px;
            display: none;
        }
    </style>
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <!--<link rel="stylesheet" type="text/css" href="styles.css"/>-->

    <link rel="shortcut icon" href="../assets/ico/favicon.ico">


</head>


<body onload="loadMap()">

<div class="alert alert-error" id="error">
    <a class="close" data-dismiss="alert" href="#">×</a>
    <strong>Warning!</strong> User mal logueado!.
</div>

<div class="alert alert-error" id="error2">
    <a class="close" data-dismiss="alert" href="#">×</a>
    <strong>Warning!</strong> Username already taken!.
</div>


<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#"> CoffeeBrak</a>

            <div class="btn-group pull-right">
                <a class="btn" data-toggle="modal" href="#myModal">
                    <i class="icon-user"></i> LogIn
                </a>
                <a class="btn" data-toggle="modal" href="#myModal2">
                    <i class="icon-user"></i> Register
                </a>
            </div>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</div>


<div id="example"></div>

<div class="hero-unit" id="mainHero">
    <h1>Hello, world!</h1>

    <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero
        unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>

    <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>

</div>


<div class="modal hide" id="myModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Login</h3>
    </div>
    <div class="modal-body">
        <div>

            <form id="loginForm" class="form-inline" action="j_security_check" method="post">

                <input id="j_username" class="input-small" name="j_username" type="text" placeholder="Username"
                       required/>

                <input type="password" class="input-small" id="j_password" name="j_password" size="25"
                       placeholder="Password" required/>


                <label class="checkbox">
                    <input type="checkbox" name="j_rememberme" value=""/>
                </label> Remember Me
        </div>

    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Cancel</a>
        <input type="submit" name="submit" class="btn btn-primary" id="submit" value="Submit"/>

        </form>
    </div>

</div>


<div class="modal hide" id="myModal2">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Register</h3>
    </div>
    <div class="modal-body">
        <div>

            <form class="form-horizontal well"  action="user.do" method="post">

                <div class="control-group">
                    <label class="control-label" for="name">Username</label>
                    <div class="controls">
                        <input type="text" name="name" id="name" class="input-xlarge" placeholder="Enter your User Name" required/>
                        <p class="help-block">Username can contain alphanumeric characters.</p>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="pass">Password</label>
                    <div class="controls">
                        <input type="password" id="pass" name="pass" placeholder="Enter your Password" class="input-xlarge" required/>
                        <p class="help-block">Dont forget your password !.</p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="mail">Password</label>
                    <div class="controls">
                        <input type="email" name="mail" id="mail" placeholder="Enter your email address" class="input-xlarge" required/>
                        <p class="help-block">Confirmation will be sent to this email please enter a valid one !.</p>
                    </div>
                </div>

                <input name="action" id="action" value="CREATE_USER" type="hidden"/>


        </div>

    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Cancel</a>

        <input type="submit" class="btn btn-primary" value="Register"/>

        </form>
    </div>

</div>

<!-- Closing the #page section -->

<!-- JavaScript Includes -->

<script type="text/javascript">
    if (window.location.search == "?error=1") {
        document.getElementById("error").style.display = "block";
    }else if (window.location.search == "?error=2") {
        document.getElementById("error2").style.display = "block";
    }
</script>

</body>
</html>
